<template>
   <div>
      <div class="home">
         <div id="title">
            <van-nav-bar id="banner" title="">
               <template #title>
                  <div style="color: grey;">
                     广科大校园在线点餐
                  </div>
               </template>
            </van-nav-bar>
            <van-sticky>
               <van-search v-model="searchValue" shape="round" @search="onSearch" placeholder="请输入商家名称" />
            </van-sticky>
         </div>

         <van-overlay :show="overlayVisable" z-index="2">
            <div class="wrapper">
               <van-loading size="24px">
                  <span id="loading">数据加载中...</span>
               </van-loading>
            </div>
         </van-overlay>

         <!-- 轮播图 -->
         <div class="swipe">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
               <van-swipe-item v-for="item in swipeData" :key="item.id">
                  <img :src="item.image" @click="onClickSwipe(item)" />
               </van-swipe-item>
            </van-swipe>
         </div>
         <van-divider></van-divider>
         <!-- 商家信息分类 -->
         <div class="category">
            <van-swipe class="my-swipe" indicator-color="white" @change="onChange">
               <van-swipe-item v-for="value in totalPage" :key="value">
                  <van-grid icon-size="30" :border="false" :column-num="5">
                     <van-grid-item v-for="(item) in shopCatalog" :key="item.id" :icon="item.icon" :text="item.name"
                        @click="curShopCatalog = item.name" />
                  </van-grid>
               </van-swipe-item>
            </van-swipe>
         </div>
         <van-divider></van-divider>
         <!-- 商家展示 -->
         <div id="shop">
            <div v-for="(item) in currentShopInfo" :key="item.id">
               <van-card :thumb="item.avatar" @click="toShopInfo(item)">
                  <template #title>
                     <div style="height: 10px;"></div>
                     <van-tag type="danger">天天神劵</van-tag>
                     <span style="margin-left: 5px; font-weight: 700;font-size: 14px;">{{item.name}}</span>
                  </template>
                  <template #desc>
                     <div style="height: 10px;"></div>
                     <div id="descTime">
                        <span id="time1">接受预定</span>
                        <span id="time2">11:00后配送</span>
                     </div>
                     <br />
                     <br />
                     <van-row>
                        <van-col span="4" style=" color:rgba(255, 17, 0, 0.867);font-weight: 700;">
                           {{item.serviceScore}}分</van-col>
                        <van-col span="5" style="color:gray">月售{{item.sellCount}}</van-col>
                        <van-col span="8" style="color:gray">人均 ¥{{item.perCapita }}</van-col>
                     </van-row>
                     <div style="height: 8px;"></div>
                  </template>
                  <template #price>
                     <span style="color:gray">起送 ¥{{item.startFee}} 配送 约 ¥{{item.deliveryFee}}</span>
                  </template>
                  <template #num>
                     <span style="color:gray">{{item.deliveryTime}} {{item.distance}}</span>
                  </template>
               </van-card>
               <div style="height: 10px;"></div>
            </div>
         </div>
         <div id="footer" style="height: 50px;">

         </div>
      </div>

   </div>
</template>
<script>
   import request from '@/utils/request'
   import {
      Toast
   } from 'vant'
   import {
      mapActions,
      mapState,
      mapMutations,
      mapGetters
   } from 'vuex'
   export default {
      name: '',
      data() {
         return {
            searchValue: '',
            page: 1,
            pageSize: 5,
            overlayVisable: false, //  是否显示遮罩
            // 轮播默认
            totalPage: 1,
            swipeData: [],
            shopCatalog: [],
            curShopCatalog: '全部',
            url: {
               getSwipeDataUrl: '/schoolOrder/app/home/findSwipe',
               getShopCatalogUrl: '/schoolOrder/app/home/findShopCatalog'
            }
         }
      },
      computed: {
         ...mapState('shopInfo', ['shopList']),

         currentShopInfo: function () {
            if (this.curShopCatalog != "全部") {
               return this.shopList.filter((shop) => shop.shopCatalog == this.curShopCatalog)
            } else {
               return this.shopList
            }

         }
      },
      methods: {
         ...mapActions('shopInfo', ['getShopByPage']),

         /**
          * 轮播图
          */
         getSwipeData() {
            request.get(this.url.getSwipeDataUrl, {}).then(
               res => {
                  this.swipeData = res.data.data
               }
            )
         },


         /**
          * 商品分类查询
          */
         getShopCatalogData() {
            request.get(this.url.getShopCatalogUrl, {
               params: {
                  pageNum: this.page,
                  pageSize: this.pageSize
               }
            }).then(
               res => {
                  this.shopCatalog = res.data.data.records
                  this.totalPage = Math.ceil(res.data.data.total / this.pageSize);
               }
            )
         },


         /**
          * 商品信息分页查询
          */
         getShopList(pageNum, pageSize, serach) {
            this.getShopByPage({
               pageNum,
               pageSize,
               serach
            })
         },


         /**
          * 轮播图设置
          * @param {} index 
          */
         onChange(index) {
            this.page = index + 1;
            // 重新获取数据
            this.getShopCatalogData()
         },

         /**
          * 查看商家信息详情
          * @param {} createBy 
          */
         toShopInfo(shop) {
            //localStorage.setItem('createBy', createBy)
            this.$store.state.good.createBy = shop.createBy;
            this.$store.state.shopInfo.createBy = shop.createBy;
            sessionStorage.setItem('createBy', shop.createBy)
            sessionStorage.setItem('shopName', shop.name)
            // console.log(shop)
            // console.log(shop.name)
            // console.log(shop.createBy)
            this.overlayVisable = true
            setTimeout(() => {
               this.$router.push("/shop/");
            }, 500);

         },

         /**
          * 搜索
          */
         onSearch() {
            var shop = this.shopList.filter((shop) => shop.name == this.searchValue)
            if (shop.length != 0) {
               this.$store.state.good.createBy = shop[0].createBy;
               this.$store.state.shopInfo.createBy = shop[0].createBy;
               sessionStorage.setItem('createBy', shop[0].createBy)
               this.$router.push("/shop/");
            } else {
               Toast("没有这个商家呢！")
            }
         },

         /**
          * 点击录播图
          */
         onClickSwipe(item) {
           var shop = this.shopList.filter((shop) => shop.id == item.shopId)
            if (shop.length != 0) {
               this.$store.state.good.createBy = shop[0].createBy;
               this.$store.state.shopInfo.createBy = shop[0].createBy;
               sessionStorage.setItem('createBy', shop[0].createBy)
               this.$router.push("/shop/");
            } else {
               return;
            }

         }

      },
      mounted() {
         this.getSwipeData()
         this.getShopCatalogData()
         this.getShopList(1, 100, '')
         sessionStorage.setItem('curActive', 0);
      },
   }
</script>
<style scoped>
   .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
   }

   .home #banner {
      background-color: gold;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
   }

   /* 测试轮播图数据 */
   .home .swipe {
      width: 90%;
      height: 120px;
      /* position: absolute; */
      margin-top: 60px;
      margin-left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10px 0 #aaaaaa;
      border-radius: 8px;
   }

   .swipe img {
      height: 160px;
      width: 100%;
      border-radius: 8px;
   }

   .category {
      box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2);
      background-color: white;
      transition: 0.3s;
      width: 98%;
      border-radius: 5px;
      margin: 10px 0 0 0;
      height: 90px;
   }

   #descTime {
      float: left;
      border: 1px solid rgba(255, 166, 0, 0.836);
      border-radius: 3px;
      width: 120px;
      height: 12px;
   }



   #descTime #time1 {
      color: white;
      background-color: rgba(255, 166, 0, 0.836);
   }

   #descTime #time2 {
      color: rgba(255, 153, 0, 0.955);
      margin-left: 2px;
      color: rgba(255, 17, 0, 0.867);
   }
</style>